<template>
  <view class="" v-if="timeType >= 0">
    <view
      class="activity"
      v-for="(item, i) in params"
      :key="i"
      @click="cartGoToView(item)"
    >
      <image class="img" :src="item.homepageImage" mode="widthFix"></image>
      <view class="ActivityTime">
        <view class="icon">
          <image
            class="icon_img"
            :src="
              timeType == 0
                ? '/static/images/special/start.png'
                : '/static/images/special/over.png'
            "
            mode="widthFix"
          >
          </image>
        </view>
        <view class="tip">
          {{ timeType == 0 ? "Time to start" : "Time to end" }}
        </view>
        <view class="times">
          <view class="time_bg"> {{ countdown.Hour }}h </view>:
          <view class="time_bg"> {{ countdown.minute }}m </view>:
          <view class="time_bg"> {{ countdown.second }}s </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { HomeAPI } from "@/api";
const params = ref(null);

const timeType = ref(-1);
const countdown = ref({
  Hour: 0,
  minute: 0,
  second: 0,
});

const emits = defineEmits(["prentCheck"]);

const cartGoToView = (data) => {
  uni.setStorageSync("special", data);
  goToView("/pages/index/special");
};

const goToView = (path) => {
  uni.navigateTo({
    url: path,
  });
};
onMounted(() => {
  getData();
});

const getData = async () => {
  let res = await HomeAPI.getHomeMyActivity();
  params.value = res;
  if (!res || res.length <= 0) {
    return;
  }
  if (isStartTime(res[0].startActivityTime)) {
    timeType.value = 0;
    const bool = countdownstart(res[0].startActivityTime);
    if (bool) {
      prentCheckBack();
      return;
    }
  }
  if (isOverTime(res[0].dactivityTime)) {
    timeType.value = 1;
    countdownstart(res[0].dactivityTime);
    prentCheckBack();
  }
  function prentCheckBack() {
    if (timeType.value != -1) {
      emits("prentCheck", timeType.value);
    }
    console.log(timeType.value);
  }
};

const countdownstart = (time) => {
  countdown.value = getCountdown(time);
  if (
    countdown.value.Hour > 0 ||
    countdown.value.minute > 0 ||
    countdown.value.second > 0
  ) {
    setTimeout(() => {
      countdownstart(time);
    }, 1000); // 每秒更新一次
    return true;
  } else {
    console.log("倒计时结束！");
  }
};

const isStartTime = (time) => {
  return new Date().getTime() < new Date(time).getTime();
};
const isOverTime = (time) => {
  return new Date().getTime() < new Date(time).getTime();
};

function getCountdown(endDate) {
  // 获取当前时间
  const now = new Date().getTime();

  // 将结束时间转换为毫秒
  const end = new Date(endDate).getTime();

  // 计算时间差（毫秒）
  const timeDiff = end - now;

  // 如果时间差小于等于0，说明已经到达或超过了结束时间
  if (timeDiff <= 0) {
    return {
      Hour: 0,
      minute: 0,
      second: 0,
    };
  }

  // 计算小时、分钟和秒
  const Hour = Math.floor(timeDiff / (1000 * 60 * 60));
  const minute = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
  const second = Math.floor((timeDiff % (1000 * 60)) / 1000);

  return {
    Hour,
    minute,
    second,
  };
}
</script>

<style lang="scss" scoped>
.activity {
  position: relative;

  .img {
    width: 100%;
  }

  .ActivityTime {
    position: absolute;
    left: 50%;
    bottom: 120rpx;
    transform: translate(-50%, 50%);
    background: #fff;
    border-radius: 900rpx;
    min-width: 60%;
    min-height: 60rpx;
    padding: 10rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    box-sizing: content-box;
    white-space: nowrap;

    .tip {
      font-size: 28rpx;
      color: #555;
    }

    .times {
      display: flex;
      align-items: center;
      margin-left: 20rpx;

      .time_bg {
        background: #eceff5;
        border-radius: 10rpx;
        padding: 5rpx;
        margin: 0 4rpx;
        color: red;
        font-size: 28rpx;
      }
    }

    .icon {
      width: 30rpx;
      margin-right: 10rpx;

      .icon_img {
        width: 100%;
      }
    }
  }
}
</style>
